<button class="task-view-pane-close" onclick="return close_task();"><i class="fa fa-chevron-right"></i></button>

<div class="px-2 my-2" style="margin-left: 24px;">

    <!-- 标题 -->
    <div class="d-table">
        <h4>{{task.info.name}}</h4>
        {% if #task.info.tags > 0 then %}
        {% for _, tag in ipairs(task.info.tags) do %}
        <span class="badge {{tags[tag].color}} mr-1 mb-1">{{tags[tag].title}}</span>
        {% end %}
        {% end %}
    </div>
    
    {% if enable_archive and task.info.status == 3 then %}
    <a href="#" class="btn-link" onclick="return archive('{{task.info.id}}');" style="position: absolute; right: 1em; top: .5em;"><i class="fa fa-archive mr-1"></i>验收任务</a>
    {% end %}
    <hr class="mx-0 mt-0 mb-1">

    <!-- 状态栏 -->
    <div class="d-flex">

        <!-- 指派 -->
        <div>
            <div class="px-2">
                <i class="fa fa-hand-o-right mr-1"></i>{{task.info.assigned_name}}
            </div>
        </div>

        <!-- 时间 -->
        <div>
            <div class="px-2">
                <i class="fa fa-calendar mr-1"></i>{{tostring(task.info.start_time) .. ' ~ ' .. tostring(task.info.end_time)}}
            </div>
        </div>
        
        <!-- 状态 -->
        <div>
            <div class="px-2">
                {% if task.info.status == 1 then %}
                <i class="fa fa-circle-o mr-1"></i>待办中
                {% elseif task.info.status == 2 then %}
                <i class="fa fa-dot-circle-o mr-1"></i>进行中
                {% elseif task.info.status == 3 then %}
                <i class="fa fa-check-circle mr-1"></i>已完成
                {% else %}
                <i class="fa fa-archive mr-1"></i>已验收
                {% end %}
            </div>
        </div>

        <!-- 优先级 -->
        <div>
            <div class="px-2">
                <i class="fa fa-tag mr-1"></i>{{weights[task.info.weight].title}}
            </div>
        </div>
    </div>

    <hr class="mt-2">

    <div id="task-content-preview" class="mt-4 h-100" style="min-height: 300px;">{{task.info.content}}</div>

    <div class="mt-4">
        <label class="text-muted">动态</label>
        <hr class="mt-0 mb-2">

        <ul class="px-0" style="list-style-type: none;font-size: .8em;">
            {% for _, ev in ipairs(task.events) do %}
            <li class="text-muted">
                <i class="fa fa-calendar mr-1"></i><span class="mr-1">{{tostring(ev.timepoint)}}</span><b class="mr-1">{{ev.user}}</b>{{ev.event_desc}} 
            </li>
            {% end %}
        </ul>
    </div>
</div>

<script>
var content = $('#task-content-preview').get(0).innerHTML;

$(document).ready(function() {
    $('#task-content-preview').empty();
    $('#task-content-preview').append('<div class="md-preview d-block mh-100">' + marked(content || '') + '</div>');
    PR.prettyPrint();
    $('.flowchart').each(function() {
        var elem = $(this);
        var diag = flowchart.parse(elem.text());
        elem.empty();
        diag.drawSVG(elem.get(0));
    });
})

function close_task() {
    $('#task-view').removeClass('visible');
    $('#task-view').addClass('invisible');
    if (location.path = '/dashboard/projects') last_pressed_button.click();
}

function archive(tid) {
    $.post('/dashboard/tasks/mod_status', {tid : tid, org_status: 3, new_status : 4}, function() {
        open_task(tid);
    });
}

</script>